<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        radar: {
          center: ['50%', '53%'],
          // 设置雷达图中间射线的颜色
          axisLine: {
            lineStyle: {
              color: '#8FEFFF',
            },
          },
          //雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
          splitArea: {
            show: false,
            areaStyle: {
              color: '#045bcd', // 图表背景的颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#045bcd', // 设置网格的颜色
            },
          },
          name: {
            formatter: function (value) {
              let list = value.split('')
              let result = ''
              for (let i = 1; i <= list.length; i++) {
                if (!(i % 5) && list[i] != undefined) {
                  result += list[i - 1] + '\n'
                } else {
                  result += list[i - 1]
                }
              }
              return result
            },
          },
          indicator: [
            {
              name: '散杂货码头',
              max: 52000
            },
            {
              name: '液体危化品码头',
              max: 52000
            },
            {
              name: '船厂、舾装码头',
              max: 52000
            },
            {
              name: '集装箱码头',
              max: 52000
            },
            {
              name: '其他',
              max: 52000
            }
          ],
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                value: [34200, 18000, 20000, 35000, 50000],
                // symbol: 'image://' + require('./images/round.png'),
                areaStyle: {
                  color: 'rgba(31, 241, 255, 0.38)',
                },
                lineStyle: {
                  color: '#1FF1FF',
                },
              },
            ],
          },
        ],
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
